<template>
    <div>
        <panle title='数据列表' content="私域直播数据列表"></panle>
        <!--        <div>-->
        <!--            <el-row  :span="12" class="pt20">-->
        <!--                <el-col :span="12" >-->
        <!--                    <el-form :inline="true" :model="formInline" class="demo-form-inline">-->
        <!--                        <el-form-item >-->

        <!--                        </el-form-item>-->

        <!--                        <el-form-item>-->
        <!--                            <el-button type="primary" size="mini" @click="serach">查询</el-button>-->
        <!--                        </el-form-item>-->
        <!--                    </el-form>-->
        <!--                </el-col>-->
        <!--            </el-row>-->
        <!--        </div>-->

        <el-table :data="tableData" style="margin-bottom: 20px;" height="700" row-key="sender" border stripe
            default-expand-all v-loading="loading">
            <el-table-column prop="start_time" width="180" label="直播时间">
                <template slot-scope="scope">
                    {{ scope.row.one_start_time && scope.row.one_start_time.split(' ')[0] }} ~ {{ scope.row.two_start_time
                        && scope.row.two_start_time.split(' ')[0]}}
                </template>
            </el-table-column>
            <el-table-column prop="live_group" align="center" label="直播组"></el-table-column>
            <el-table-column prop="nick_name" align="center" label="销售"></el-table-column>
            <el-table-column prop="one_yaoyue_num" align="center" label="day1邀约数"></el-table-column>
            <el-table-column prop="one_daoke_num" align="center" label="day1到课数"></el-table-column>
            <el-table-column align="center" label="day1到课率">
                <el-table-column width="180" align="center" prop="one_daoke_rate" label="day1到课数/day1邀约数">
                </el-table-column>
            </el-table-column>
            <el-table-column prop="one_undaoke_num" align="center" label="day1未到课数">
                <template slot-scope="scope">
                    {{ scope.row.one_yaoyue_num - scope.row.one_daoke_num }}
                </template>
            </el-table-column>
            <el-table-column prop="two_yaoyue_num" align="center" label="day2邀约数"></el-table-column>
            <el-table-column prop="two_daoke_num" align="center" label="day2到课数"></el-table-column>
            <el-table-column align="center" label="day2到课率">
                <el-table-column width="180" align="center" prop="two_daoke_rate" label="day2到课数/day2邀约数">
                </el-table-column>
            </el-table-column>
            <el-table-column prop="two_undaoke_num" align="center" label="day2未到课数">
                <template slot-scope="scope">
                    {{ scope.row.two_yaoyue_num - scope.row.two_daoke_num }}
                </template>
            </el-table-column>
            <el-table-column prop="live_deal_num" align="center" label="直播间到课成交数"></el-table-column>
            <el-table-column align="center" label="直播间到课成交率">
                <el-table-column width="200" align="center" prop="live_deal_rate" label="到课成交数/day2到课数">
                </el-table-column>
            </el-table-column>
            <el-table-column prop="unlive_deal_num" align="center" label="课后到课成交数"></el-table-column>
            <el-table-column align="center" label="课后到课成交率">
                <el-table-column width="200" align="center" prop="unlive_deal_rate" label="已到课,非直播间成交数/day2到课数">
                </el-table-column>
            </el-table-column>

            <el-table-column prop="total_deal_num" align="center" label="到课总成交数"></el-table-column>
            <el-table-column align="center" label="到课总成交率">
                <el-table-column width="200" align="center" prop="total_deal_rate"
                    label="已到课, 总成交数(直播间到课成交+课后到课成交)/day2到课数">
                </el-table-column>
            </el-table-column>
            <el-table-column prop="no_pay_num" align="center" label="未支付数">
                <template slot-scope="scope">
                    <PersButton type="text" perms="live:order:index" :label="String(scope.row.no_pay_num)"
                        @click="handleJumpClick(scope.row)"></PersButton>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pageInfo.pageNumber" :page-sizes="pageSizes" :page-size="pageInfo.pageSize" background
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import {
    liveSellerStat,
} from '@/api/live/manager'

export default {
    name: 'Live-Sales',
    data() {
        return {
            loading: false,
            pageInfo: {
                pageSize: 10,
                pageNumber: 1,
            },
            pageSizes: [10, 50, 100, 200],
            total: 0,
            tableData: [],
            formInline: { live_group: '' },


        }
    },
    created() {
        this.init();
    },
    methods: {
        async init() {
            if (!this.$route.query.live_group) {
                return
            }
            this.loading = true;
            let param = {
                ...this.pageInfo,
                "live_group": this.$route.query.live_group || 117
            }
            const { data = [], code = 0 } = await liveSellerStat(param)
            if (code === 200) {
                this.tableData = data?.list;
                this.total = data?.total;
            }
            this.loading = false;
        },
        handleClear() {
            this.formInline.live_group = ''
            this.init()
        },
        serach() {
            this.init();
        },
        handleSizeChange: function (e) {
            this.pageInfo.pageSize = e;
            this.init();
        },
        handleCurrentChange: function (e) {
            this.pageInfo.pageNumber = e;
            this.init();
        },
        handleClick() {
            // 查看销售统计
            this.$router.push({
                path: '/live/stat/sales'
            })
        },
        handleJumpClick({ one_id = 0, two_id = 0, no_pay_num = 0, sender = '' }) {
            if (no_pay_num > 0 || sender) {
                const liveId = [];
                if (one_id) {
                    liveId.push(one_id)
                }
                if (two_id) {
                    liveId.push(two_id)
                }
                const params = {
                    liveId,
                    state: '0',
                    user_name: sender,
                    signin_status: 2
                }
                sessionStorage.setItem('live-stat', JSON.stringify(params))
                this.$router.push({
                    name: 'Order',
                    params
                })
            }
        }

    }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/common.scss";

.el-select .el-input {
    width: 200px;
}
</style>
